<template>
  <div>
    <el-card>
    <el-card>
      <el-descriptions class="margin-top" v-model="this.totalData" :title="$t('概况')" direction="vertical" :column="12"
        :size="size" border>
        <el-descriptions-item :label="$t('订阅总数')">{{totalData.total}}</el-descriptions-item>
        <el-descriptions-item :label="$t('订阅总人数')">{{
          totalData.userTotal
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('订阅总额')">{{
          "$" + totalData.totalPrice
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('点击总数')">
          {{ totalData.total }}</el-descriptions-item>
        <el-descriptions-item :label="$t('订阅总积分')">{{
          totalData.totalPoint
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('订单数量')">{{
          totalData.orderNum
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('商品数量')">{{
          totalData.goodsNum
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('自提数')">{{
          totalData.selfNum
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('门店配送数')">
          {{ totalData.storeNum }}</el-descriptions-item>
        <el-descriptions-item :label="$t('邮寄数')">{{
          totalData.mailNum
          }}</el-descriptions-item>
        <el-descriptions-item :label="$t('商品价值')">{{ "$" + totalData.basePrice }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('损耗金额')">{{
          "$" + totalData.lossAmount
          }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>

    <el-select v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>

    <el-select v-model="listQuery.orderType" clearable class="filter-item" :placeholder="$t('请选择配送方式')">
      <el-option v-for="item in orderTypeList" :value="item.id" :label="item.name"></el-option>
    </el-select>

    <el-input style="width: 202px" v-model="listQuery.userName" :placeholder="$t('请输入用户名称')" clearable></el-input>

    <el-select v-model="listQuery.orderStatus" clearable class="filter-item" :placeholder="$t('请选择状态')">
      <el-option v-for="item in orderStatusList" :value="item.id" :label="item.name"></el-option>
    </el-select>
    <el-date-picker v-model="listQuery.dateTime" value-format="yyyy-MM-dd hh:mm:ss" type="daterange" align="right" unlink-panels
      range-separator="——" :start-placeholder='$t("Start_time")' :end-placeholder='$t("End_time")'
      :picker-options="pickerOptions">
    </el-date-picker>

    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"
      v-permission="['GET /admin/p/lumiere_statistic']">{{ $t("Search") }}</el-button>
    <!-- <el-descriptions>
      <el-descriptions-item :label='$t("区域")'>{{queryList.regionId}}</el-descriptions-item>
      <el-descriptions-item :label='$t("时间范围")'>{{queryList.startTime}}/{{queryList.endTime}}</el-descriptions-item>
    </el-descriptions> -->

  </el-card>
    <el-card>
      <el-table :data="orderList" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('订单编号')" prop="orderSn">
          <template slot="header" slot-scope="{ row }">
            {{ $t("订单编号") }}
            <i class="el-icon-s-order"></i>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('门店')" prop="shopName">
        </el-table-column>

        <el-table-column align="center" :label="$t('订阅名称')" prop="subscribeName">
        </el-table-column>

        <el-table-column align="center" :label="$t('商品')" prop="goodsNames">
          <template slot="header" slot-scope="{ row }">
            {{ $t("商品") }}
            <i class="el-icon-coffee"></i>
          </template>
          <template slot-scope="scope">
            <el-row v-for="goods in scope.row.goods">
              {{ goods.goodsName }}
            </el-row>
          </template>
        </el-table-column>
        <!--订单类型(1:自提；2：外送;3:堂食；4：邮寄)-->
        <el-table-column align="center" :label="$t('价值')" prop="actualPrice" :formatter="formatPrice">
          <template slot-scope="{ row }"> {{ row.actualPrice }}$ </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('订单时间')" prop="payTime">
        </el-table-column>

        <el-table-column align="center" :label="$t('配送方式')" prop="transportType">
          <template slot-scope="scope">
            {{ filterTransportType(scope.row.orderType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('配送/取货时间')" width="300" prop="receiptRange">
          <template slot="header" slot-scope="{ row }">
            {{ $t("配送/取货时间") }}
            <i class="el-icon-timer"></i>
          </template>
          <template slot-scope="{ row }">
            <el-tag type="success" effect="plain1">
              {{ row.receiptRange }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('用户账户')" prop="userName">
        </el-table-column>

        <el-table-column align="center" :label="$t('状态')" prop="shipStatus">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.transportType == 1" effect="plain1">
              {{ filterShipStatus(scope.row.transportType) }}
              <i class="el-icon-truck"></i>
            </el-tag>
            <el-tag type="warning" v-else="scope.row.transportType == 2" effect="plain1">
              {{ filterShipStatus(scope.row.transportType) }}
              <i class="el-icon-truck"></i>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Operate')" width="100" class-name="small-padding fixed-width">
          <template slot="header" slot-scope="{ row }">
            {{ $t("Operate") }}
            <i class="el-icon-setting" style="color: #d35e32"></i>
          </template>
          <template slot-scope="scope">
            <el-button icon="el-icon-view" type="info" v-permission="['GET /admin/p/lumiere_statistic_detail']" plain1
              size="mini" @click="handleDetail(scope.row)">{{ $t("Details") }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryList.page" :limit.sync="queryList.limit"
        @pagination="getList" />
    </el-card></el-card>
  </div>
</template>

<script>
  import { queryOrderInSubscribe } from "../../api/lumiereSubscribeStatistic";
  import Pagination from "@/components/Pagination";
  import ElSelectDropdown from "element-ui/packages/select/src/select-dropdown";
  import BackToTop from "@/components/BackToTop";
  import { allForPerm } from "../../api/shop";

  export default {
    name: "subscribeTypeStatisticDetail",
    components: { ElSelectDropdown, BackToTop, Pagination },
    data() {
      return {
        total: 0,
        shops: [],
        orderTypeList: [
          {
            id: 1,
            name: "自提",
          },
          {
            id: 2,
            name: "配送",
          },
          {
            id: 3,
            name: "堂食",
          },
          {
            id: 4,
            name: "外带",
          },
        ],
        orderStatusList: [
          {
            id: 101,
            name: "下单",
          },
          {
            id: 102,
            name: "取消",
          },
          {
            id: 103,
            name: "自动取消",
          },
          {
            id: 201,
            name: "待发货",
          },
          {
            id: 202,
            name: "退款",
          },
          {
            id: 203,
            name: "退款成功",
          },
          {
            id: 301,
            name: "待收货",
          },
          {
            id: 401,
            name: "确认收货",
          },
          {
            id: 402,
            name: "自动确认收货",
          },
        ],
        listQuery: {
          page: 1,
          limit: 20,
          shopId: undefined,
          orderType: undefined,
          userName: undefined,
          orderStatus: undefined,
          sort: "add_time",
          order: "desc",
          dateTime: undefined
        },
        queryList: {
          startTime: "",
          endTime: "",
          regionId: 1,
          id: 1,
          name: "",
          page: 1,
          limit: 20,
        },
        totalData: {
          total: 0,
          userTotal: 0,
          totalPrice: 0,
          totalPoint: 0,
          orderNum: 0,
          goodsNum: 0,
          selfNum: 0,
          storeNum: 0,
          mailNum: 0,
          basePrice: 0,
          lossAmount: 0,
        },
        orderList: [],
        pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
      };
    },
    methods: {
      init() {
        this.totalData = this.$route.query.totalData;
        this.queryList.endTime = this.$route.query.endTime;
        this.queryList.startTime = this.$route.query.startTime;
        this.queryList.regionId = this.$route.query.regionId;
        //通过id查询对应的订单数据
        this.getList();
      },
      getList() {
        if (this.totalData.subscribeId) {
          queryOrderInSubscribe({
            subscribeId: this.totalData.subscribeId,
            ... this.listQuery
          })
            .then((response) => {
              this.orderList = response.data.data.list;
              this.total = response.data.data.total;
            })
            .catch(() => {
              this.list = [];
              this.total = 0;
              this.listLoading = false;
            });
        }
      },
      handleDetail(row) {
        this.$router.push({ path: "/order/detail", query: { id: row.id } });
      },
      filterTransportType(transportType) {
        if (transportType == 1) {
          return this.$t("自取");
        } else if (transportType == 2) {
          return this.$t("门店配送");
        } else if (transportType == 3) {
          return this.$t("堂食");
        } else if (transportType == 4) {
          return this.$t("物流");
        }
      },
      filterShipStatus(shipStatus) {
        if (shipStatus == 1) {
          return this.$t("未发货");
        } else {
          return this.$t("已发货");
        }
      },
      handleFilter() {
        this.getList();
      },
      formatPrice(row, column, cellValue) {
        // 在金额前面添加 $ 符号，并返回新的字符串
        return "$" + cellValue;
      },
    },
    created() {
      this.init();
      allForPerm().then((response) => {
        this.shops = response.data.data.list;
      });
    },
  };
</script>

<style scoped>
</style>
